<template>
    <!-- 匹配政策图表 -->
    <div ref="chartContainer" style="width: 600px; height: 200px;"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

import { watch } from 'vue';

watch(() => props.counts, (newVal) => {
  if (chartContainer.value) {
    const myChart = echarts.getInstanceByDom(chartContainer.value);
    myChart?.setOption({ series: [{ data: [
          { value: newVal.five, name: '5星' },
          { value: newVal.four, name: '4星' },
          { value: newVal.three, name: '3星' }
        ] }] });
  }
}, { deep: true });

const props = defineProps<{
  counts: { five: number, four: number, three: number }
}>()

// 创建图表容器的引用
const chartContainer = ref<HTMLDivElement | null>(null);

onMounted(() => {
    if (chartContainer.value) {
        const myChart = echarts.init(chartContainer.value);

        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}', // 只显示名称，去掉数值和百分比
            },
            legend: {
                orient: 'vertical', // 垂直排列
                left: 'left', // 将图例放置在左侧
                top: 'center', // 图例垂直居中
                data: ['5星', '4星', '3星'], // 图例项，修改为“3星”
                selectedMode: 'multiple', // 允许多选（可以切换不同图例）
                formatter: (name: string) => {
                    const data = {
                      '5星': props.counts.five,
                      '4星': props.counts.four,
                      '3星': props.counts.three
                    };
                    return `${name} ${data[name]}`; // 在图例后面加上数值
                },
            },
            series: [
                {
                    name: '星级',
                    type: 'pie',
                    radius: ['50%', '70%'], // 定义环形的内外半径
                    avoidLabelOverlap: false,
                    label: {
                        show: false, // 不显示标签的数值
                        position: 'outside', // 标签显示在外侧
                    },
                    labelLine: {
                        show: true, // 显示连接线
                    },
                    data: [
                      { value: props.counts.five, name: '5星' },
                      { value: props.counts.four, name: '4星' },
                      { value: props.counts.three, name: '3星' }
                    ],
                },
            ],
            graphic: {
                elements: [
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            text: '匹配度', // 中间显示的文本
                            textAlign: 'center',
                            font: '12px Arial',
                            fill: '#333', // 设置字体颜色
                        },
                    },
                    {
                        type: 'text',
                        left: 'left', // 将文本定位到左侧
                        top: '20%', // 距离顶部10%的位置
                        style: {
                            text: '政策项目数量', // 在左侧图例上方显示
                            textAlign: 'center',
                            font: '12px Arial',
                            fill: '#333',
                        },
                    },
                ],
            },
        };

        // 使用指定的配置项和数据显示图表
        myChart.setOption(option);
    }
});
</script>

<style scoped>
/* 可选：为图表容器添加一些样式 */
#chartContainer {
    position: relative;
}
</style>
